<template>
	<view class="route-shareholder">
		<view class="homebg">
			<image class="homebgimg" src="../../static/images/bg.png" mode=""></image>
		</view>
		<view class="route-cont">
			<view class="header" :style="{'height':(totalHeight||50)+'px','padding-top':statusBarHeightRef+'px'}">
				<view class="icon" @click="handleBack" :style="{'top':(statusBarHeightRef+10)+'px'}">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
				收入统计
			</view>
			<view class="inner">
				<view class="sy">
					<!-- <view class="tit">
						本月收益(元)
					</view>
					<view class="val">
						0
					</view> -->
				</view>
				<view class="tj">
					<view class="tit">
						<view class="">
							收入统计(元)
						</view>
						<!-- <view class="zd" @click="handleGoBanlance">
							账单
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view> -->
					</view>
					<view class="tj-cont">
						<view class="tj-item">
							<view class="tips">
								已提现
							</view>
							<view class="val">
								{{formatNumber(shouruInfo.ytx)}}
							</view>
						</view>
						<view class="tj-item">
							<view class="tips">
								今日收入
							</view>
							<view class="val">
								{{formatNumber(shouruInfo.dayprice)}}
							</view>
						</view>
						<view class="tj-item">
							<view class="tips">
								剩余金额
							</view>
							<view class="val">
								{{formatNumber(shouruInfo.price)}}
							</view>
						</view>
						<view class="tj-item">
							<view class="tips">
								本年收入
							</view>
							<view class="val">
								{{formatNumber(shouruInfo.yearprice)}}
							</view>
						</view>
						<view class="tj-item">
							<view class="tips">
								累计收入
							</view>
							<view class="val">
								{{formatNumber(shouruInfo.income)}}
							</view>
						</view>
					</view>
				</view>

				<view class="user">
					<view class="tit">
						<view class="">
							推荐用户
						</view>
						<view class="zd" @click="handleGoRecom">
							查看
							<u-icon name="arrow-right" color="#999" size="14"></u-icon>
						</view>
					</view>
					<view class="user-cont">
						<view class="user-item">
							<view class="tips">
								一级推荐
							</view>
							<view class="val">
								{{shouruInfo.tjyj}}
							</view>

						</view>
						<!-- <view class="user-item">
							<view class="tips">
								二级推荐
							</view>
							<view class="val">
								{{shouruInfo.tjej}}
							</view>

						</view> -->
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="btn" @click="handleGoTixian">
					去提现
				</view>
				<!-- <view class="btn">
					分享海报
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import handleCache from "@/utils/cache.js"
	import formatNumber from "@/utils/formatNumber";

	import {
		ref,
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		commonApi
	} from '@/api/index.js'
	const totalHeight = ref(0)
	const statusBarHeightRef = ref(0)
	const userInfo = ref('')
	const shouruInfo = ref('')
	onShow(() => {
		console.log(888888)
		userInfo.value = handleCache.get('userInfo')
		getShouru()
	})
	onLoad(() => {
		//#ifndef H5

		uni.getSystemInfo({
			success: res => {
				let menu = uni.getMenuButtonBoundingClientRect()
				let statusBarHeight = res.statusBarHeight
				let menuHeight = menu.height
				let menuTop = menu.top
				let navigatorHeight = (menu.top - res.statusBarHeight) * 2 + menu.height
				totalHeight.value = statusBarHeight + navigatorHeight
				statusBarHeightRef.value = statusBarHeight
			}
		})
		//#endif

	})
	const getShouru = () => {
		let req = {
			uid: userInfo.value.id
		}
		commonApi.usershouru(req).then((res) => {
			shouruInfo.value = res.data
		})
	}
	const handleBack = () => {
		uni.navigateBack(-1)
	}
	const handleGoBanlance = () => {
		uni.navigateTo({
			url: '/pagesA/balance/balance'
		})
	}
	const handleGoRecom = () => {
		uni.navigateTo({
			url: '/pagesA/recommend/recommend'
		})
	}
	const handleGoTixian = () => {
		uni.navigateTo({
			url: '/pagesA/tixian/tixian'
		})
	}
</script>

<style lang="scss">
	.route-shareholder {
		padding-bottom: 170rpx;

		.homebg {
			position: fixed;
			left: 0;
			z-index: 2;
			top: 0;
			width: 100%;

			.homebgimg {
				width: 100%;
				display: block;

			}
		}

		.route-cont {
			position: relative;
			z-index: 3;

			.header {
				color: #ffff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 500;
				position: relative;

				.icon {
					position: absolute;
					left: 0;
					padding: 0 20rpx;

				}

			}

			.footer {
				position: fixed;
				width: 100%;
				bottom: 0;
				left: 0;
				background-color: #fff;
				padding-left: 24rpx;
				padding-right: 24rpx;
				padding-top: 11rpx;
				height: 130rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ED2920;
					color: #fff;
					padding: 0 0;
					width: 100%;
					height: 80rpx;
					border-radius: 10rpx;
				}
			}

			.inner {
				padding: 50rpx 24rpx 0 24rpx;

				.sy {
					text-align: center;
					color: #fff;
					font-weight: 500;

					.tit {}

					.val {
						margin-top: 10rpx;
						font-size: 48rpx;
					}
				}

				.tj {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					margin-top: 50rpx;

					.tit {
						display: flex;
						justify-content: space-between;
						font-weight: 500;
						border-bottom: 1px solid #edf0f2;
						padding-bottom: 14rpx;
						padding: 20rpx 0;

						.zd {
							display: flex;
							align-items: center;
							color: #999;
						}
					}

					.tj-cont {
						display: flex;
						flex-wrap: wrap;

						.tj-item {
							width: 33.33%;
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 30rpx 0 30rpx 0;

							.tips {
								color: #999;
							}

							.val {
								margin-top: 20rpx;
								font-weight: 500;
								font-size: 36rpx;
							}
						}
					}
				}

				.user {
					background-color: #fff;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					margin-top: 30rpx;

					.tit {
						display: flex;
						justify-content: space-between;
						font-weight: 500;
						border-bottom: 1px solid #edf0f2;
						padding-bottom: 14rpx;
						padding: 20rpx 0;

						.zd {
							display: flex;
							align-items: center;
							color: #999;
						}
					}

					.user-cont {
						display: flex;
						flex-wrap: wrap;

						.user-item {
							width: 33.33%;
							text-align: center;
							display: flex;
							flex-direction: column;
							justify-content: center;
							padding: 30rpx 0 30rpx 0;

							.tips {
								color: #999;
							}

							.val {
								margin-top: 20rpx;
								font-weight: 500;
								font-size: 36rpx;
							}
						}
					}
				}
			}
		}
	}
</style>